import React from 'react'
import { Layout,Avatar,Dropdown,Menu} from 'antd';
import { withRouter } from 'react-router-dom';
import {connect} from 'react-redux'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';
const { Header } = Layout;
function TopHeader(props) {
  const changeCollapsed = ()=>{
    props.changeCollapsed()
  }
  const {role:{roleName},username,roleId} = JSON.parse(localStorage.getItem('token'))
  const menu = (
    <Menu>
      <Menu.Item key={roleName}>
        {roleName}
      </Menu.Item>
      <Menu.Item key={roleId} danger onClick={()=>{
        localStorage.removeItem('token')
        props.history.replace('/login')
      }}>退出</Menu.Item>
    </Menu>
  );
  return (
    <Header className="site-layout-background" style={{ padding: 0 }}>
      {
        props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}></MenuUnfoldOutlined> 
                  : <MenuFoldOutlined onClick={changeCollapsed}></MenuFoldOutlined>
      }
      <div style={{float:'right'}}>
        <span>欢迎<span style={{color:'#1890ff'}}>{username}</span>回来</span>
        <Dropdown overlay={menu}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}

const mapStateToProps = ({CollApsedReducer:{isCollapsed}})=>{
  return{
    isCollapsed
  }
}
const mapDispatchToProps = {
  changeCollapsed(){
    return {
      type:'change_collapsed'
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader)) 